<template>
  <div class="my-friend-container">
    <div class="item-card">
      <search :searchInfo="searchInfo"
              @search="init"></search>
      <div class="select-item">
        <div class="aGroup clearfix"
             v-if="show_in_wx == 2">
          <scroll ref="wrapper"
                  class="wrapper"
                  :data="list"
                  :startX="0"
                  :click="true"
                  :scrollX="true"
                  :scrollY="false"
                  :eventPassthrough="'vertical'">
            <div class="content">
              <div>
                <van-button class="span" data-id="1"  @click="selectItem(1)" :color="[type == 1 ? '#F30C23':'#999999']" plain hairline round type="primary">
                  <i>全部</i>
                  <em>{{arr.total||0}}</em>
                </van-button>
              </div>
            </div>
          </scroll>
        </div>
        <div class="aGroup clearfix"
             v-else>
          <scroll ref="wrapper"
                  class="wrapper"
                  :data="list"
                  :startX="0"
                  :click="true"
                  :scrollX="true"
                  :scrollY="false"
                  :eventPassthrough="'vertical'">
            <div class="content">
              <div v-if="business_model > 2">
                <van-button class="span" data-id="1"  @click="selectItem(1)" :color="[type == 1 ? '#F30C23':'#999999']" plain hairline round type="primary">
                  <i>全部</i>
                  <em>{{arr.total||0}}</em>
                </van-button>
                <van-button class="span" data-id="2"  @click="selectItem(2)" :color="[type == 2 ? '#F30C23':'#999999']" plain hairline round type="primary">
                  <i>{{level_superior}}</i>
                  <em>{{arr.superior_total||0}}</em>
                </van-button>
                <van-button class="span" data-id="3"  @click="selectItem(3)" :color="[type == 3 ? '#F30C23':'#999999']" plain hairline round type="primary">
                  <i>{{level_top}}</i>
                  <em>{{arr.top_total||0}}</em>
                </van-button>
                <van-button class="span" data-id="4"  @click="selectItem(4)" :color="[type == 4 ? '#F30C23':'#999999']" plain hairline round type="primary">
                  <i>{{level_three}}</i>
                  <em>{{arr.three_total||0}}</em>
                </van-button>
              </div>
              <div class="content"
                   v-else-if="business_model > 1">
                <van-button class="span" data-id="1"  @click="selectItem(1)" :color="[type == 1 ? '#F30C23':'#999999']" plain hairline round type="primary">
                  <i>全部</i>
                  <em>{{arr.total||0}}</em>
                </van-button>
                <van-button class="span" data-id="2"  @click="selectItem(2)" :color="[type == 2 ? '#F30C23':'#999999']" plain hairline round type="primary">
                  <i>{{level_superior}}</i>
                  <em>{{arr.superior_total||0}}</em>
                </van-button>
                <van-button class="span" data-id="3"  @click="selectItem(3)" :color="[type == 3 ? '#F30C23':'#999999']" plain hairline round type="primary">
                  <i>{{level_top}}</i>
                  <em>{{arr.top_total||0}}</em>
                </van-button>
              </div>
            </div>
          </scroll>
        </div>
      </div>
    </div>
    <div class="user-list"
         v-show="list.length>0">
      <van-list v-model="loading"
                :finished="finished"
                :error.sync="error"
                error-text="请求失败，点击重新加载"
                finished-text=""
                @load="onLoad">
        <div v-for="(item, index) in list"
             :key="index"
             class="item clearfix">
          <div class="levelimg fl">
            <img :src="item.headimgurl"
                 width="100%"
                 alt
                 v-if="item.headimgurl" />
            <img src="https://img.wifenxiao.com/h5-wfx/images/default_avatar.jpg"
                 width="100%"
                 alt
                 v-else />
          </div>
          <div class="levelinfo fl">
            <p v-if="item.nickname">
              <span>昵称：</span>
              <span>{{item.nickname}}</span>
            </p>
            <p v-else>
              <span>ID：</span>
              <span>{{item.user_id}}</span>
            </p>
            <p v-if="item.mobile">
              <span>手机：</span>
              <span>{{item.mobile}}</span>
            </p>
            <p v-if="item.area">
              <span>地区：</span>
              <span>{{item.area}}</span>
            </p>
            <p v-if="item.level_name">
              <span>级别：</span>
              <span>{{item.level_name}}</span>
            </p>
            <p v-if="item.director">
              <span>上级：</span>
              <span>{{item.director}}</span>
            </p>
            <p v-else-if="item.superior_user_id && pid!==item.superior_user_id">
            <!-- <p v-else-if="item.superior_user_id"></p> -->
              <span>上级ID：</span>
              <span>{{item.superior_user_id}}</span>
            <p>
              <span>时间：</span>
              <span>{{item.create_time}}</span>
            </p>
            <p v-if="item.is_agent==1 && item.expected_commission && SHOP_ID!='8000329'">
              <span>预计{{commission_name}}：</span>
              <span>{{item.expected_commission}}%</span>
            </p>
            <div class="point-send"
                 v-if="is_point_send==1 && !(point_send_to_direct==1 && item.ralation_level!=1)">
              <van-button class="send-btn" @click="clickSendPoint(item)" color="linear-gradient(to right, #F82337, #FF2D59)" round >赠送{{point_name}}</van-button>
            </div>
          </div>
        </div>
      </van-list>
      <van-dialog v-model="showDonation"
                  :title="'赠送'+point_name"
                  show-cancel-button
                  confirm-button-text="确定"
                  @confirm='confirmDonation'
                  @close="hideDonation"
                  class="common-confirm">
        <section class="donation-box">
          <div class="input-box">
            <label for="">数量：</label><input type="number"
                   name="point"
                   id="J-get-info"
                   v-model="donationPoint" />
          </div>
        </section>
      </van-dialog>
    </div>
    <div v-show="!list.length && finished">
      <no-data :noData="noData"></no-data>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import noData from '@/components/noData/index'
import Search from '@/components/Search/index'
import Scroll from '@/components/scroll/index'
import { getMyFriend, getMyFriendList, transferPoint } from '@/api/user/member/memberApi'

export default Vue.extend({
  components: {
    noData,
    Search,
    Scroll
  },
  data() {
    return {
      noData: {
        text: '暂无分销商',
        img: 'https://img.wifenxiao.com/h5-wfx/images/user/no_user_data.png',
        marginTop: '60px'
      },
      searchInfo: {
        placeholder: '会员ID/昵称'
      },
      show_in_wx: '',
      SHOP_ID: '',
      commission_name: '佣金',
      is_point_send: '',
      point_send_to_direct: '',
      point_name: '',
      list: [
        // {
        //   headimgurl: 'http://thirdwx.qlogo.cn/mmopen/vi_32/esYDbD8129keq98hGbnRicLnPQcqst6okBw2fnmiaS2FdHpHhicdlYxPKTof0S5ibOT2QMDwrQnMvWss5W3X9icHMWw/132',
        //   nickname: '昵称',
        //   user_id: '11',
        //   mobile: '1511212',
        //   area: '杭州',
        //   level_name: '黄金',
        //   director: 'aa',
        //   superior_user_id: '22',
        //   create_time: '2019-10-10',
        //   is_agent: '1',
        //   expected_commission: '22%',
        //   ralation_level: '2'
        // }
      ],
      type: 1,
      business_model: 3,
      level_superior: '直属',
      level_top: '间接',
      level_three: '底层',
      arr: {
        superior_total: '',
        three_total: '',
        top_total: '',
        total: ''
      },
      loading: false,
      error: false,
      finished: false,
      // p: 2,
      listParams: {
        p: 1,
        type: this.type,
        keyword: ''
      },
      showDonation: false,
      showDonationConfirm: false,
      donationForm: {
        friend_uid: '',
        point: ''
      },
      donationFriendUid: '',
      donationPoint: '',
      pid: ''
    }
  },
  methods: {
    init(keyword, type = this.type) {
      this.listParams.keyword = keyword
      this.listParams.type = type
      this.listParams.p = 1
      const sid = this.$route.query.sid || 6
      this.SHOP_ID = sid
      this.$loadingWrap.show()
      setTimeout(() => {
        this.$loadingWrap.close()
      }, 10000)

      getMyFriend({ keyword: keyword, type: type }).then(res => {
        this.$loadingWrap.close()
        if (res.status == 1) {
          const resData = res.data
            wx.setNavigationBarTitle({
              title: resData.ftitle_friend
            })
          this.show_in_wx = resData.show_in_wx
          this.commission_name = resData.commission_name
          this.is_point_send = resData.is_point_send
          this.is_point_send = resData.is_point_send
          this.point_send_to_direct = resData.point_send_to_direct
          this.point_name = resData.point_name
          this.business_model = resData.business_model
          this.level_superior = resData.level_superior
          this.level_top = resData.level_top
          this.level_three = resData.level_three
          this.arr = resData.arr
        } else {
          this.$Error(res.msg)
        }
      })
      getMyFriendList(this.listParams).then(res => {
        this.$loadingWrap.close()
        if (res.status == 1) {
          this.list = res.data
          this.listParams.p++
        } else {
          this.$Error(res.msg)
        }
      })
    },
    // 切换
    selectItem(type) {
      this.listParams = {
        p: 1,
        type: type,
        keyword: this.listParams.keyword
      }
      this.type = type
      getMyFriendList(this.listParams).then(res => {
        this.$loadingWrap.close()
        if (res.status == 1) {
          this.list = res.data
          this.listParams.p++
        } else {
          this.$Error(res.msg)
        }
      })
    },

    // 加载更多
    onLoad() {
      getMyFriendList(this.listParams).then(res => {
        this.loading = false
        if (res.data.length) {
          this.list.push(...res.data)
          this.listParams.p++
        } else {
          this.finished = true
        }
      }).catch(() => {
        this.error = true
      })
    },
    // 赠送积分
    clickSendPoint(item) {
      this.showDonation = true
      this.donationFriendUid = item.user_id
    },
    // 关闭转赠弹窗清空弹窗数据
    closeDonation() {
      this.donationFriendUid = ''
      this.donationPoint = ''
    },
    // 点击弹窗关闭按钮
    hideDonation() {
      this.showDonation = false
      this.closeDonation()
    },
    // 点击确定转赠
    confirmDonation() {
      this.$loadingWrap.show()
      setTimeout(() => {
        this.$loadingWrap.close()
      }, 10000)
      // TODO 小程序处理
      transferPoint({
        friend_uid: this.donationFriendUid,
        point: this.donationPoint
      }).then(res => {
        this.$loadingWrap.close()
        if (res.status == 1) {
          this.$Error('赠送成功')
          this.showDonation = false
          this.closeDonation()
        } else {
          this.$Error(res.msg)
        }
      })
    }
  },
  created() {
    this.pid = this.$store.getters.pid
    this.init()
  },
  mounted() {
    // TODO 小程序触底加载更多
    window.addEventListener('reachbottom', () => {
      this.onLoad()
    })
  }
})
</script>
<style lang="scss">
@import "src/styles/user/cardList/index.scss";
@import "src/styles/variables.scss";
@import "src/styles/user/Group/index.scss";
.my-friend-container {
  .levelinfo {
    // padding-bottom: 60px;
  }
  .point-send {
    width: 100%;
    padding: 10px 0 2px;
  }
  .send-btn {
    display: inline-block;
    height: 50px;
    padding: 0 30px;
    border-radius: 25px;
    text-align: center;
    color: #fff;
    font-size: 22px;
  }
}
.item-card {
  // margin: 0 20px;
  padding: 10px 0;
  border-radius: 0 0 20px 20px;
  overflow: hidden;
  background-color: $default;
  .select-item {
    padding: 10px 40px 15px;
    em {
      display: inline-block;
    }
  }
}
//转赠优惠券
.donation-box {
  padding: 30px 0;
  .input-box {
    width: 100%;
    height: 80px;
    font-size: 28px;
    padding: 0 100px;
    &:nth-of-type(2) {
      margin-top: 20px;
    }
    label {
      width: 28%;
      line-height: 80px;
      display: block;
      float: left;
      font-weight: normal;
      text-align: right;
      color: #666666;
    }
    input,
    select {
      width: 256px;
      height: 80px;
      padding: 15px 20px;
      display: block;
      float: left;
      font-size: 28px;
      color: #999;
      border: 2px solid #ededed;
      border-radius: 6px;
    }
    .info {
      display: block;
      float: right;
      font-size: 24px;
      color: #ff5000;
      width: 25%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}
</style>
